<!--
 * @Author: tian_biao
 * @Date: 2021-08-19 10:31:36
 * @LastEditTime: 2021-08-24 11:10:19
 * @Description: 选择变电站
-->

<template>
    <div id="selectPeoplePage">
        <!-- 头部导航 -->
        <Theader :title="title">
            <template slot="header_arrow">
                <van-icon @back="back" size="22" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <!-- 搜索区域-->
        <!-- <van-search style="margin-top: 46px;" v-model="subName" clearable @click="focus" background="#fff"
            placeholder="搜索变电站">
        </van-search> -->
        <div class="box">
            <div class="collect">
                <div>巡视范围</div>
                <div>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1" class="fw600">
                            <template slot="icon">
                                <img class="img-icon" :src="radio=='1'?sel:wsel" />
                            </template>
                            全站</van-radio>
                        <van-radio name="2" class="fw600">
                            <template slot="icon">
                                <img class="img-icon" :src="radio=='2'?sel:wsel" />
                            </template>
                            专项</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="collect mt1rem">
                <div>专项范围</div>
                <div class="mr1rem">
                    289个
                </div>
            </div>
        </div>
        <div class="searchBox">
            <div class="collect">
                <van-search style="flex:0.9;" v-model="subName" clearable @click="focus" background="#fff"
                    placeholder="请输入设备名称">
                </van-search>
                <img class="ly2 mr1rem" src="../../images/ly2.png" alt="" srcset="">
            </div>
        </div>
        <div class="box mt1rem">
            <div class="collect">
                <div class="wordTitle1">
                    <div class="deviceType" :class="{selectBtn:SelectActive=='deviceType'}"
                        @click="selectShowData('deviceType')">
                        设备类型
                    </div>
                    <div class="interval" :class="{selectBtn:SelectActive=='interval'}"
                        @click="selectShowData('interval')">
                        间隔单元
                    </div>
                </div>
            </div>
            <div class="collect mt1rem">
                <div>主变压器</div>
                <div class="collect width65px">
                    <div>全选</div>
                    <van-checkbox v-model="radioAll" checked-color="#0EB295" />
                    </van-checkbox>
                </div>
            </div>
            <div class="deviceList mt1rem">
                <div class="menu">
                    <div class="typeItem" v-for="(item,index) in deviceTypeList" :key="index"  :class="{color0EB295:item.checked}" @click="selectType(item)">{{item.deviceTypeName}}</div>
                </div>
                <div class="deviceListSel">
                    <van-checkbox-group v-model="result">
                        <van-cell-group>
                            <van-cell v-for="(item, index) in deviceList" clickable :key="index"
                                :title="item.deviceName" @click="toggle(index)">
                                <template #right-icon>
                                    <van-checkbox :name="item" color="#0EB295" ref="checkboxes" />
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-checkbox-group>
                </div>
            </div>
        </div>
         <div class="btnBox mt1rem" @click="back">
            <div class="addTask">
                取消
            </div>
            <div class="overTour" @click="back">
                确定
            </div>
        </div>
    </div>

</template>

<script>
    import { Dialog } from 'vant';
    const PinyinEngine = require('pinyin-engine');
    import Theader from "./header"
    export default {
        name: "SelectDevice",
        components: {
            Theader
        },

        data() {
            return {
                title: "选择设备",
                subName: '',
                radio: "1",
                result: [],
                radioAll: false,
                border: false,
                deviceTypeList: [
                    {
                        deviceTypeName: "避雷器",
                        checked: false,
                        deviceList: [
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                            { deviceName: "1#主变压器", checked: false },
                        ],

                    },
                    {
                        deviceTypeName: "避雷器",
                        checked: false,
                        deviceList: [
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                            { deviceName: "2#主变压器", checked: false },
                        ],

                    },
                    {
                        deviceTypeName: "避雷器",
                        checked: false,
                        deviceList: [
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                            { deviceName: "3#主变压器", checked: false },
                        ],

                    },
                ],
                deviceList: [{ deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },
                { deviceName: "3#主变压器", checked: false },],
                SelectActive: "deviceType",
                sel: require("../../images/sel.png"),
                wsel: require("../../images/wsel.png"),

            };
        },
        computed: {
        },
        methods: {
            focus() {

            },
            /**
             * @description: 返回
             */
            back() {
                this.$emit("comfirmDevice")
            },
            /**
             * @description: 确定
             */
            selectDevice(item) {
                this.$emit("comfirmDevice", item)
            },
            /**
             * @description: 设备类型、间隔单元点击事件
             * @param {*} type
             * @return {*}
             */
            selectShowData(type) {
                this.SelectActive = type
                console.log(this.SelectActive);
            },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
            },

            selectType(item){
                this.deviceList=item.deviceList
                this.deviceTypeList.forEach(v => {
                    v.checked=false
                });
                item.checked=true
            }

        },
        mounted() {
            //this.getPeopleList()
        }
    };
</script>

<style scoped>
    #selectPeoplePage {
        width: 100vw;
        height: 100vh;
        font-size: 16px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        background: #f5f6fa;
        text-align: left;
        z-index: 9999;
    }

    .box {
        width: 86%;
        margin: 0 auto;
        margin-top: 4rem;
        padding: 1rem;
        background-color: #fff;
        border-radius: 4px;
    }

    .searchBox {
        width: 93%;
        margin: 0 auto;
        margin-top: 1rem;
        background-color: #fff;
        border-radius: 4px;
    }

    .img-icon {
        height: 20px;
    }

    .collect {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .fw600 {
        font-weight: 600;
    }

    .mr1rem {
        margin-right: 1rem;
    }

    .mt1rem {
        margin-top: 1rem !important;
    }

    .mr_2rem {
        margin-right: -2rem !important;
        background: none !important;
    }

    .width65px {
        width: 65px;
    }

    .ly2 {
        width: 1.5rem;
        height: 1.5rem;
    }

    .wordTitle1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: #0EB295;

    }
    .color0EB295{
        color: #0EB295 !important;
    }
    .wordTitle1>div {
        width: 10rem;
        height: 2rem;
        border: 1px solid #ccc;
        color: #333;
        text-align: center;
        line-height: 2rem;
    }

    .deviceType {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .interval {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .selectBtn {
        border: 1px solid #0EB295 !important;
        color: #0EB295 !important;
        background-color: #E7F7F5 !important;
    }

    .deviceList {
        width: 100%;
        display: flex;
    }

    .deviceList>div {
        height: 32vh;
        overflow-y: auto;
    }

    .menu {
        flex: 0.3;
        /* background-color: skyblue; */
    }

    .deviceListSel {
        flex: 0.7;
    }
    .typeItem{
        width: 100%;
        height: 3rem;
        border-bottom: 1px solid #f5f6fa;
        text-align:center;
        line-height:3rem;
    }
     .btnBox {
        width: 100vw;
        height: 4rem;
        margin-top: 1rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        bottom: 0;
    }

    .btnBox>div {
        width: 45%;
        height: 3rem;
        border-radius: 4px;
        text-align: center;
        line-height: 3rem;
    } 
     .addTask {
        border: 1px solid #0EB295;
        color: #0EB295;
    }
    .overTour {
        background-color: #0EB295;
        color: #fff;
    }
</style>